<template>
	<navigatorComp title="还愿记录" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<mescroll-uni :height="height + 'px'" :up="upOption" @init="mescrollInit" @down="myDownCallback" @up="upCallback">
		<view class="huanyuanList">
			<view class="huanyuanItem" v-for="(item, index) in huanyuanList">
				<view class="display_flex">
					<image :src="headUrl || 'http://112.124.50.179:8888/imgs/default_avater.png'" mode="" class="huanyuan_avater">
					</image>
					<view>
						<view class="huanyuan_info">
							<!-- <text style="max-width: 136rpx" class="singleLineOverflowHidden">
								{{ item.peopleName }}
							</text> -->
							<text style="margin-left: 8rpx">向</text>
							<text style="margin-left: 8rpx; color: #f3e0bb">{{ item.name }}</text>
							<text style="margin-left: 8rpx">还愿</text>
							<text style="margin-left: 8rpx; color: #f3e0bb">{{item.price}}福币</text>
						</view>
						<view class="huanyuan_time">
							<text>{{ formatTimestamp(item.time) }}</text>
							<!-- <text style="margin-left: 24rpx">剩余:{{item.offeringExpire}}</text> -->
						</view>
					</view>
				</view>
				<image :src='item.offeringImage' mode="" class="huanyuan_img"></image>
			</view>
		</view>
	</mescroll-uni>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import store from '@/store';
	import {
		formatTimestamp
	} from '@/utils/time';
	import WorshipApi from '@/API/worship';
	const worshipApi = new WorshipApi();

	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(); // 调用mescroll的hook
	const upOption = {
		page: {
			size: 10 // 每页数据的数量
		},
		noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		// empty: {
		// 	use: false //不显示空图
		// }
	};
	const lastId = ref(0); //最后一个元素的id
	const height = ref(0);
	const huanyuanList = ref([]);
	const headUrl = store.state.userInfo.userInfo.headUrl;

	onLoad(() => {
		// #ifdef MP-WEIXIN
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight;
		// #endif

		// #ifdef APP || H5
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(88);
		// #endif
	});

	/**
	 * 上拉加载
	 */
	const upCallback = (mescroll) => {
		worshipApi
			.huanyuanRecord({
				latestId: lastId.value
			})
			.then((res) => {
				const curPageData = res.data.items || []; // 当前页数据
				console.log(curPageData);
				if (lastId.value === 0) huanyuanList.value = []; //如果是第一页需手动制空列表
				huanyuanList.value = huanyuanList.value.concat(curPageData); //追加新数据\
				if (curPageData.length > 0) {
					lastId.value = curPageData[curPageData.length - 1].worshipId;
				}
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	const myDownCallback = (mescroll) => {
		lastId.value = 0;
		downCallback();
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.huanyuanList {
		padding: 32rpx;

		.huanyuanItem {
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			width: 100%;
			background: #292b2a;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.huanyuan_avater {
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				margin-right: 12rpx;
			}

			.huanyuan_info {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 40rpx;
				display: flex;
			}

			.huanyuan_time {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				margin-top: 6rpx;
			}

			.huanyuan_img {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>